/**
 * Created by ziyu on 2017/7/26.
 */

import React, {Component, PropTypes} from 'react'
import {Card, Table, Icon, message, Popover, Input, Button} from 'antd'
import Styles from '../case/details/Index.less'
import {fetchPost} from '../../../utils/request'

class BillDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            userId: null,
            item: props.item,
            link: null,
            reNewLink: null
        }
    }

    getPayLinks(tradeNo) {
        if (this.state.link !== null) {
            return;
        }
        fetchPost('/collection/v2/payLink/' + tradeNo).then(res => {
            this.setState({
                link: res.data.link,
            })
        })
    }
    getExtentionLinks(tradeNo) {
        if (this.state.reNewLink !== null) {
            return;
        }
        fetchPost('/collection/v2/extentionLink/' + tradeNo).then(res => {
            this.setState({
                reNewLink: res.data.link,
            })
        })
    }

    componentWillReceiveProps(props) {
        if (this.state.userId !== props.userId) {
            this.setState({
                userId: props.userId,
                item: props.item || {},
                link: null,
                reNewLink: null
            })
        }
    }


    getPaymentLink(link) {
        return (
            <div>
                <br/>
                <p>{link}</p>
                <br/>
            </div>
        );
    }

    render() {
        let tradeNo = this.state.item.tradeNo
        let collectionOrderDetailVoList = this.state.item.collectionOrderDetailVoList || []
        const columns = [
            {
                title: 'Loan ID',
                dataIndex: 'tradeNo1',
                key: 'tradeNo1',
                width: 100,
                render: () => this.state.item.originNo
            },
            {
                title: 'Billing Day',
                dataIndex: 'repaymentDate',
                key: 'repaymentDate',
                width: 100,
                render: (text, record) => (
                    <div>
                        {record.period} period
                        <br/>
                        <span>{record.repaymentDate.split(' ')[0]}</span>
                    </div>
                )
            },

            {
                title: 'Amount detail',
                dataIndex: '',
                key: '',
                render: (text, record) => (
                    <div>
                        <span>Principal: {record.realCapital}</span>
                        <br/>
                        <span>Interest: {record.interest}</span>
                        <br/>
                        <span>Penalty: {record.lateFee}</span>
                        <br/>
                        <span style={{color: 'red'}}>Unpaid Amount: {record.noRepayAmount}</span>
                        <br/>
                        <span>Paid Amount: {record.paidAmount}</span>
                        <br/>
                        <span>Deduct Amount: {record.deductAmount}</span>
                    </div>
                )
            },
            {
                title: 'Total Amount Should Repay',
                dataIndex: 'expireAmount',
                key: 'expireAmount'
            },
            {
                title: 'Days Overdue',
                dataIndex: '',
                key: '',
                render: (text, record) => `${record.overdueDays < 0 ? 0 : record.overdueDays}days`
            },
            {
                title: 'Actually Repayment Date',
                dataIndex: 'actualRepaymentDate',
                key: 'actualRepaymentDate'
            },
            {
                title: 'Link',
                key: 'link',
                render: (text, record) => (
                    <div>

                        <Popover content={this.getPaymentLink(this.state.reNewLink)} trigger="click">
                            <Button onClick={() => this.getExtentionLinks(this.state.item.tradeNo)}>reNew Link</Button>
                        </Popover>
                        <br/>
                        <br/>
                        <Popover style={{marginLeft: 10}} content={this.getPaymentLink(this.state.link)}
                                 trigger="click">
                            <Button type={"primary"}
                                    onClick={() => this.getPayLinks(this.state.item.tradeNo)}>pay___Link</Button>
                        </Popover>
                    </div>
                )
            },

        ]

        return (
            <div className={Styles.detailModule}>
                <Card title='Billing Details'
                      noHovering={true}
                      bodyStyle={{padding: 0, minHeight: 80, overflowY: 'scroll'}}>
                    <Table
                        size='small'
                        pagination={false}
                        bordered
                        dataSource={collectionOrderDetailVoList}
                        columns={columns}
                        key='name'
                    />
                </Card>
            </div>
        )
    }
}

export default BillDetail
